[ElementTiming] Add intrinsic size This CL adds naturalWidth and naturalHeight members to PerformanceElementTiming to allow developers to compute a size that aligns more with the importance of the image with the help of these attributes and intersectionRect. This CL also adds tests for CSS scaling and rotation. Bug: 879270 Change-Id: I9dbbe802dd430c2dd0fd9a476608c0c744a98095 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1545169 Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/master@{#646368} diff --git a/element-timing/image-with-rotation.html b/element-timing/image-with-rotation.html new file mode 100644 index 0000000..4e00c68 --- /dev/null +++ b/element-timing/image-with-rotation.html
@@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<meta charset=utf-8> +<title>Element Timing: image with rotation.</title> +<head> +<style> +body { + margin: 0px; +} +.my_div { + width: 100px; + height: 50px; + transform: rotate(45deg); + transform-origin: top left; +} +</style> +</head> +<body> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="resources/element-timing-helpers.js"></script> +<script> + const beforeRender = performance.now(); + async_test(function (t) { + const observer = new PerformanceObserver( + t.step_func_done(function(entryList) { + assert_equals(entryList.getEntries().length, 1); + const entry = entryList.getEntries()[0]; + const index = window.location.href.lastIndexOf('/'); + const pathname = window.location.href.substring(0, index - 14) + + 'images/black-rectangle.png'; + checkElement(entry, pathname, 'rectangle', beforeRender); + checkNaturalSize(entry, 100, 50); + const rect = entry.intersectionRect; + // The div rotates with respect to the origin, so part of it will be invisible. + // The width of the visible part will be 100 / sqrt(2) and the height will be + // 100 / sqrt(2) + 50 / sqrt(2). + assert_equals(rect.left, 0); + // Checking precision only to the nearest integer. + assert_equals(Math.round(rect.right), 71); + assert_equals(rect.top, 0); + assert_equals(Math.round(rect.bottom), 106); + }) + ); + observer.observe({entryTypes: ['element']}); + }, 'Image intersectionRect is affected by rotation, but not its intrinsic size.'); +</script> +<div class="my_div"> + <img src="/images/black-rectangle.png" elementtiming="rectangle"/> +</div> +</body> 